<template>
    <a-modal v-model:visible="visable" :width="600" :mask-closable="false" title="添加/编辑管理员" @ok="doSubmit"
        @cancel="close">
        <a-form ref="appForm" :model="formData" :rules="formRule" :label-col-props="{ span: 6 }" layout="vertical">
            <a-row :gutter="8">
                <a-col :span="8">
                    <a-form-item label="姓名" label-position="top" field="name">
                        <a-input v-model="formData.name" placeholder="请输入姓名" />
                    </a-form-item>
                </a-col>
                <a-col :span="6">
                    <a-form-item label="身份" label-position="top" field="roleId">
                        <a-select v-model="formData.roleId">
                            <a-option :value="item.roleId" v-for="(item, index) in roleList" :key="index">{{
                                    item.name
                            }}</a-option>
                        </a-select>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="8">
                <a-col :span="8">
                    <a-form-item label="登录账号" label-position="top" field="username">
                        <a-input v-model="formData.username" placeholder="建议使用手机号码" />
                    </a-form-item>
                </a-col>
                <a-col :span="8">
                    <a-form-item label="登录密码" label-position="top" field="password">
                        <a-input v-model="formData.password" type="password" placeholder="请输入登录密码" />
                    </a-form-item>
                </a-col>
                <a-col :span="8">
                    <a-form-item label="是否启用" label-position="top" field="status">
                        <a-radio-group type="button" button-style="solid" v-model="formData.status" :false-value="0"
                            :true-value="1">
                            <a-radio :value="1">启用</a-radio>
                            <a-radio :value="0">禁用</a-radio>
                        </a-radio-group>
                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>
    </a-modal>
</template>

<script lang="ts">
import { onBeforeMount, ref } from 'vue';
import utils from '@/utils/utils';
import request from '@/config/request';
export default {
    setup(props, { emit }) {
        const visable = ref(false);
        const roleList = ref([] as any);
        const appForm = ref();
        const loading = ref(false);
        const formRule = {
            name: [{ required: true, message: '请输入姓名' }],
            roleId: [{ required: true, message: '请选择身份' }],
            username: [
                { required: true, type: 'string', message: '请输入登录账号' },
                { type: 'string', minLength: 5, message: "请输入5位以上的登录账号" }
            ],
            password: [
                { required: true, message: '请输入登录密码' },
                { minLength: 6, message: '密码长度至少6位' }
            ]
        } as any;
        const formData = ref({
            admId: ref(),
            name: ref(),
            roleId: ref(),
            username: ref(),
            password: ref(),
            status: ref(1)
        })
        const show = (data: any) => {
            formData.value.admId = '';
            visable.value = true;
            if (!utils.isEmpty(data)) {
                formData.value = JSON.parse(JSON.stringify(data));
            }
        }

        const doSubmit = () => {
            return new Promise(resolve => {
                appForm.value.validate().then((err: any) => {
                    if (err) {
                        resolve(false); return;
                    }
                    // utils.loading();
                    request.post('/platform/admin/save', formData.value).then((ret: any) => {
                        if (ret.code == 200) {
                            resolve(true);
                            emit('success');
                            close();
                            utils.success('操作成功！');
                        }
                        resolve(false);
                    }).catch(() => {
                        resolve(false);
                        loading.value = false;
                    })
                })
            })
        }

        const close = () => {
            visable.value = false;
            appForm.value.resetFields();
        }

        onBeforeMount(() => {
            request.get("/platform/role/list", { page: 1, limit: 20 }).then(ret => {
                roleList.value = ret.data.records;
            })
        })


        return { visable, appForm, formData, roleList, formRule, show, close, doSubmit, };
    }
}
</script>

<style>

</style>